
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>办公用品管理系统</title>

    <link rel="stylesheet" href="my/bootstrap.min.css">
    <link rel="stylesheet" href="my/mystyle.css">
    <script src="my/jquery-3.1.1.min.js"></script>
    <script src="my/vue.js"></script>
    <script src="my/bootstrap.min.js"></script>
    <script src="my/axios.min.js"></script>
    <script src="my/echarts.common.min.js"></script>
    <script src="my/macarons.js"></script>
    <!---<link rel="shortcut icon" href="pic/officeicon.ico">  -->
</head>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid" id="user">
        <div class="navbar-header">
            <a class="navbar-brand" href="manage_officelist" style="font-family: Microsoft YaHei;font-size: 20px;color: #fff">办公用品管理系统</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right" style="margin-right: 50px;">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
                       style="font-family: Microsoft YaHei;font-size: 20px;color: #fff">{{ user_truename }}</span></a>
                    <ul class="dropdown-menu">
                        <li><img src="pic/user2_icon.png"></li>
                        <li class="dropdown-header" style="color: #8a8a8a">{{ user_truename }}</li>
                        <li class="dropdown-header" style="color: #8a8a8a">{{ user_name }}</li>
                        <li role="separator" class="divider"></li>
                        <li><a data-toggle="modal" data-target="#userInfo">个人详情</a></li>
                        <li><a href="loginout">注销</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<body style="padding-top: 51px;">

<div class="left-nav">
    <div class="list-group" id="fun_show_left">
        <a href="manage_officelist" th:class="${isOfficeList}?'list-group-item list-item-active':'list-group-item'" >物品申请</a>
        <a href="manage_officeInfo" th:class="${isOfficeInfo}?'list-group-item list-item-active':'list-group-item'" v-show="userdata.user_authority >= 3">物品管理</a>
        <a href="manage_officeType" th:class="${isOfficeType}?'list-group-item list-item-active':'list-group-item'" v-show="userdata.user_authority >= 3" >物品类型</a>
        <a href="manage_userInfo" th:class="${isUserInfo}?'list-group-item list-item-active':'list-group-item'" v-show="userdata.user_authority >= 7">用户管理</a>
        <a href="manage_applyCheck" th:class="${isApplyCheck}?'list-group-item list-item-active':'list-group-item'" v-show="userdata.user_authority >= 3">申请审核</a>
        <a href="manage_applyList" th:class="${isApplyList}?'list-group-item list-item-active':'list-group-item'">申请状态</a>
        <a href="manage_borrowList" th:class="${isBorrowList}?'list-group-item list-item-active':'list-group-item'">借入/归还登记</a>
        <!--<a href="manage_returnList" th:class="${isReturnList}?'list-group-item list-item-active':'list-group-item'">归还记录</a>-->
        <!--<a href="#" class="list-group-item" v-show="userdata.user_authority >= 3">购入记录</a>-->
        <a href="manage_useData" th:class="${isUseData}?'list-group-item list-item-active':'list-group-item'" v-show="userdata.user_authority >= 3">数据统计</a>
    </div>
</div>

<div class="rigth-nav">
    <div class="container" style="margin-left: 0;width: 85%;">
        <!--用户管理模块（用户查询、修改、删除、添加）-->
        <div th:include="manage_userInfo :: m_userInfo" th:if="${isUserInfo}"></div>
        <!--物品申请模块（物品查询、借入）-->
        <div th:include="manage_officelist :: m_officelist" th:if="${isOfficeList}"></div>
        <!--物品管理模块（物品增删改查） -->
        <div th:include="manage_officeInfo :: m_officeInfo" th:if="${isOfficeInfo}"></div>
        <!--物品类型管理（类型增删改查）-->
        <div th:include="manage_officeType :: m_officeType" th:if="${isOfficeType}"></div>
        <!--申请审核模块（申请的审批）-->
        <div th:include="manage_applyCheck :: m_applyCheck" th:if="${isApplyCheck}"></div>
        <!--申请记录模块（申请记录查看，权限大于3可以搜索用户申请记录）-->
        <div th:include="manage_applyList :: m_applyList" th:if="${isApplyList}"></div>
        <!--借入记录模块（借入记录查看）-->
        <div th:include="manage_borrowList :: m_borrowList" th:if="${isBorrowList}"></div>
        <!--归还记录模块-->
        <div th:include="manage_returnList :: m_returnList" th:if="${isReturnList}"></div>
        <!--使用统计模块-->
        <div th:include="manage_useData :: m_useData" th:if="${isUseData}"></div>

    </div>
</div>

<!-- 个人信息Modal框   用户个人信息查看和修改-->
<div th:include="modal :: userModal"></div>
<!-- 添加用户用modal框 -->
<div th:include="modal :: addUserModal"></div>
<!-- 用户信息修改用modal框 -->
<div th:include="modal :: userChangeModal"></div>
<!--申请物品modal框-->
<div th:include="modal :: applyModal"></div>
<!--修改物品modal框-->
<div th:include="modal :: changeProductModal"></div>
<!--增加物品modal框-->
<div th:include="modal :: addProductModal"></div>
<!--删除物品modal框-->
<div th:include="modal :: deleteProductModal"></div>
<!--增加物品类型modal框-->
<div th:include="modal :: addTypeModal"></div>
<!--删除物品类型modal框-->
<div th:include="modal :: deleteTypeModal"></div>
<!--申请审核确认modal框-->
<div th:include="modal :: applyCheckModal"></div>
<!--删除申请记录确认modal框-->
<div th:include="modal :: daleteApplyModal"></div>

<!--借入记录归还、挂失、删除modal框-->
<div th:include="modal :: borrowModal"></div>

</body>

<!--通用数据流-->
<script src="my/public_data.js"></script>
<!--用户管理数据处理-->
<script src="my/manage_userInfo.js"></script>
<!--物品申请模块处理-->
<script src="my/manage_officelist.js"></script>
<!--物品管理模块处理-->
<script src="my/manage_officeInfo.js"></script>
<!--物品类型模块处理-->
<script src="my/manage_officeType.js"></script>
<!--申请审核模块处理-->
<script src="my/manage_applyCheck.js"></script>
<!--借入归还模块处理-->
<script src="my/manage_borrowList.js"></script>
<script>
/*    $('.list-group-item').click(function () {
        $(this).siblings('.list-group-item').removeClass('list-item-active');
        $(this).addClass('list-item-active');
    });*/

//数据统计模块处理
var m_useData = new Vue({
    el:'#allUseData',
    data:{
        allProductData:{
            storeData:'',
            applyData:'',
            borrowData:'',
            missData:'',
        }
    },
    mounted:function () {
        this.showAllProductData();
        this.showProductMoneyData();
        this.showProductTypeData();
        this.showProductApplyData();
    },
    methods:{
        //物品去向数据统计
        showAllProductData:function () {
            var self = this;
            var all_product_data = echarts.init($('#allProductData')[0]);
            all_product_data.showLoading();
            setInterval(function(){
                // 指定图表的配置项和数据
                axios.get('/useProductData').then(function (value) {
                    var result = value.data;
                    var option = {
                        title: {
                            text: '办公用品去向统计',
                            left: 'center',
                            top: 0,
                            textStyle: {
                                color: '#333B47'
                            }
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        //选项显示
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: ['库内物品','待审物品','借出物品','遗失消耗物品']
                        },
                        series : [
                            {
                                name: '物品去向',
                                type: 'pie',
                                radius: '55%',
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 1,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                data:[
                                    {value:result.storeData, name:'库内物品'},
                                    {value:result.applyData, name:'待审物品'},
                                    {value:result.borrowData, name:'借出物品'},
                                    {value:result.missData, name:'遗失消耗物品'}
                                ]
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    all_product_data.setOption(option);
                });
                all_product_data.hideLoading();
            }, 3000);
        },
        //办公用品费用统计
        showProductMoneyData:function () {
            var self = this;
            var all_productMoney_data = echarts.init($('#ProductMoneyData')[0]);
            all_productMoney_data.showLoading();
            setInterval(function(){
                // 指定图表的配置项和数据
                axios.get('/productMoneyData').then(function (value) {
                    var resultM = value.data;
                    var option = {
                        title: {
                            text: '办公用品资金组成（单位:元）',
                            subtext: 'From Office DB'
                        },
                        tooltip : {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            },
                            formatter: function (params) {
                                var tar = params[1];
                                return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value + '元';
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type : 'category',
                            splitLine: {show:false},
                            data : ['物品总资金','库存物品资金','待审核物品资金','借出物品资金','消耗遗失资金']
                        },
                        yAxis: {
                            type : 'value'
                        },
                        series: [
                            {
                                name: '辅助',
                                type: 'bar',
                                stack:  '总量',
                                itemStyle: {
                                    normal: {
                                        barBorderColor: 'rgba(0,0,0,0)',
                                        color: 'rgba(0,0,0,0)'
                                    },
                                    emphasis: {
                                        barBorderColor: 'rgba(0,0,0,0)',
                                        color: 'rgba(0,0,0,0)'
                                    }
                                },
                                data: [0, resultM.totalMoney-resultM.storeM,
                                    resultM.totalMoney-resultM.storeM-resultM.applyM,
                                    resultM.totalMoney-resultM.storeM-resultM.applyM-resultM.borrowM,
                                    resultM.totalMoney-resultM.storeM-resultM.applyM-resultM.borrowM-resultM.missM]
                            },
                            {
                                name: '资金',
                                type: 'bar',
                                stack: '总量',
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'inside'
                                    }
                                },
                                itemStyle:{
                                    normal: {
                                        // 随机显示
                                        //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                                        // 定制显示（按顺序）
                                        color: function(params) {
                                            var colorList = ['#C33531','#64BD3D','#EE9201','#29AAE3', '#B74AE5' ];
                                            return colorList[params.dataIndex]
                                        }
                                    },
                                },
                                data:[resultM.totalMoney, resultM.storeM, resultM.applyM, resultM.borrowM, resultM.missM]
                            }
                        ]
                    };
                    all_productMoney_data.setOption(option);
                });
                all_productMoney_data.hideLoading();
            }, 3000);
        },
        //用品类型使用统计
        showProductTypeData:function () {
            var all_productType_data = echarts.init($('#ProductTypeData')[0]);
            all_productType_data.showLoading();
            setInterval(function(){
                axios.get('/ProductTypeData').then(function (value) {
                    var result = value.data;
                    var option = {
                        title: {
                            text: '办公用品类型统计',
                            subtext: 'From Office DB'
                        },
                        legend: {},
                        tooltip: {},
                        dataset: {
                            source: [
                                ['product', '使用中', '已归还', '消耗遗失'],
                                ['文具事务用品', result.stationery0, result.stationery1, result.stationery2],
                                ['办公耗材', result.consumable0, result.consumable1, result.consumable2],
                                ['办公设备', result.equipment0, result.equipment1, result.equipment2]
                            ]
                        },
                        xAxis: {type: 'category'},
                        yAxis: {},
                        // Declare several bar series, each will be mapped
                        // to a column of dataset.source by default.
                        series: [
                            {type: 'bar'},
                            {type: 'bar'},
                            {type: 'bar'}
                        ]
                    };
                    all_productType_data.setOption(option);

                });
                all_productType_data.hideLoading();
            }, 3000);
        },
        //用品类型申请统计
        showProductApplyData:function () {
            var all_productApply_data = echarts.init($('#ProductApplyData')[0]);
            all_productApply_data.showLoading();
            setInterval(function(){
                axios.get('/ApplyTypeNumData').then(function (value) {
                    var result = value.data;
                    var option = {
                        title: {
                            text: '用品类型申请数量统计'
                        },
                        tooltip : {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    right:0,
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            data:['文具事务用品','办公耗材','办公设备']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: result.week
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name:'文具事务用品',
                                type:'line',
                                stack: '总量',
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top'
                                    }
                                },
                                areaStyle: {},
                                data:result.stationeryData
                            },
                            {
                                name:'办公耗材',
                                type:'line',
                                stack: '总量',
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top'
                                    }
                                },
                                areaStyle: {},
                                data:result.consumableData
                            },
                            {
                                name:'办公设备',
                                type:'line',
                                stack: '总量',
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top'
                                    }
                                },
                                areaStyle: {},
                                data:result.equipmentData
                            }
                        ]
                    };
                    all_productApply_data.setOption(option);
                });
                all_productApply_data.hideLoading();
            }, 3000);


        }
    }
});







</script>

</html>